<template>
  <div class="bottomlist">
    <div class="content-center m-top-5">
      <div class="bot-title">
        <p class="m-left-10">当前委托</p>
      </div>
      <div class="histable-list">
        <template>
          <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column prop="date" label="时间" width="150"></el-table-column>
            <el-table-column prop="name" label="交易对" width="150"></el-table-column>
            <el-table-column prop="province" label="类型" width="120"></el-table-column>
            <el-table-column prop="city" label="方式" width="120"></el-table-column>
            <el-table-column prop="address" label="方向" width=""></el-table-column>
            <el-table-column prop="zip" label="价格 (USDT)" width="120"></el-table-column>
            <el-table-column prop="zip" label="数量 (LOL)" width="120"></el-table-column>
            <el-table-column prop="zip" label="委托总额 (USDT)" width="160"></el-table-column>
            <el-table-column prop="city" label="触发条件" width="120"></el-table-column>
            <el-table-column prop="zip" label="已成交" width=""></el-table-column>
            <el-table-column prop="zip" label="未成交" width="120"></el-table-column>
            <el-table-column prop="zip" label="操作" width=""></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 委托历史 (最近一周) -->
      <div class="content-bottom m-top-5">
        <div class="bot-title">
          <p class="m-left-10">委托历史 (最近一周)</p>
        </div>
        <div class="histable-list">
        <template>
          <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column prop="date" label="时间" width="150"></el-table-column>
            <el-table-column prop="name" label="交易对" width="150"></el-table-column>
            <el-table-column prop="province" label="类型" width="120"></el-table-column>
            <el-table-column prop="city" label="方式" width="120"></el-table-column>
            <el-table-column prop="address" label="方向" width=""></el-table-column>
            <el-table-column prop="zip" label="价格 (USDT)" width="120"></el-table-column>
            <el-table-column prop="zip" label="委托量" width="120"></el-table-column>
            <el-table-column prop="zip" label="已成交 (LOL)" width=""></el-table-column>
            <el-table-column prop="province" label="成交均价" width=""></el-table-column>
            <el-table-column prop="zip" label="成交额 (USDT)" width="120"></el-table-column>
            <el-table-column prop="address" label="触发条件" width=""></el-table-column>
            <el-table-column prop="zip" label="状态" width="120"></el-table-column>
            <el-table-column prop="zip" label="操作" width="120"></el-table-column>
          </el-table>
        </template>
      </div>
      </div>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  name: "bottom-Order",
  data() {
    return {
      tableData: [{
          date: '2019-11-09',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2019-11-09',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2019-11-09',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2016-05-01',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2016-05-08',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2016-05-06',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }, {
          date: '2016-05-07',
          name: 'BTC/USDT',
          province: '卖出',
          city: '币币',
          address: '挂单委托',
          zip: 12345
        }]
    };
  },
  mounted() {},
  destroyed() {},
  methods: {
    formatter(row, column) {
      return row.rise;
    },
    // 获取自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentId = "opt";
      customList && customList.length > 0 && (this.tableData = customList);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.bot-title {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  background: #131625;
  width: 100%;
  border-bottom: 1px solid #131625;
  border-radius: 2px 2px 0 0;
}
</style>

